<template>
  <div>
    <van-nav-bar title="小思同学" left-arrow @click-left="$router.go(-1)" fixed></van-nav-bar>
    <div class="line"></div>
    <div style="height:100%">
      <van-cell size="large" class="box">
        <template #title>
          <div class="listBox">
            <div v-for="(item, i) in list" :key="i">
              <div class="msgBox" v-if="item.name === 'xs'">
                <van-image class="img" fit="cover" round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                <div class="msg1">{{ item.msg }}</div>
              </div>
              <div class="msgBox2" v-else>
                <div class="msg2" v-html="item.msg"></div>
                <van-image class="img" fit="cover" round :src="$store.state.userPhoto" />
              </div>
            </div>
          </div>
        </template>
      </van-cell>
      <div class="send">
        <van-field v-model.trim="word" ref="field" @blur="blur" @keyup.enter="send()" clearable
          placeholder="说点什么...." />
        <van-button type="default" @click="send()">发送</van-button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入io包
import { io } from 'socket.io-client'
import Notify from '@/ui/Notify'
export default {
  data () {
    return {
      word: '',
      list: [],
      socket: null
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
      // dom更新再执行
        this.$nextTick(() => {
        // 获取最后一个div
          const theDiv = document.querySelector('.listBox>div:last-child')
          theDiv.scrollIntoView({
            behavior: 'smooth'
          })
        })
      }
    }
  },
  created () {
    setTimeout(() => {
      this.$refs.field.focus()
    }, 50)
    // 可以使用http或者ws
    this.socket = io('ws://geek.itheima.net', {
      query: {
        token: this.$storage.getStorage('geek-itheima')
      },
      transports: ['websocket']
    })
    // 连接到服务器,名字固定为connect
    this.socket.on('connect', () => {
      console.log('建立链接成功')
    })
    // 接收后端传回的消息
    this.socket.on('message', obj => {
      this.list.push({ name: 'xs', msg: obj.msg })
    })
  },
  methods: {
    send () {
      if (this.word !== '') {
        const word = this.word
        const timestamp = this.$utils.timestamp()
        this.list.push({ name: 'me', msg: this.word })
        // 发送数据给后端,名字需要与后端设置的名字一样
        this.socket.emit('message', { msg: word, timestamp: timestamp })
        this.word = ''
      } else {
        Notify({ type: 'danger', message: '不能为空' })
      }
    },
    blur () {
      this.$refs.field.focus()
    }
  },
  // 销毁时,关闭服务
  destroyed () {
    this.socket.close()
    this.socket = null
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  overflow-y: scroll;
}

.listBox {
  margin-bottom: 60px;
}

/deep/ .van-icon-arrow-left {
  color: #fff;
  font-size: 18px;
}

/deep/ .van-nav-bar__content {
  height: 54px;
}

.line {
  margin-bottom: 54px;
}

.img {
  width: 40px;
  height: 40px;
}

.msgBox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.msgBox2 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: right;
}

.msg1 {
  background: #09bb07;
  color: #fff;
  border-radius: 5px;
  padding: 7px;
  position: relative;
  margin-left: 10px;
  border: 1px solid black;
  text-align: left;
}

.msg2 {
  background: #fff;
  color: #000;
  border-radius: 5px;
  padding: 7px;
  position: relative;
  margin-right: 10px;
  border: 1px solid black;
  text-align: left;
}

.msg2::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  border-top: 1px solid black;
  border-right: 1px solid black;
  transform: rotate(45deg);
  right: -5px;
  top: 35%;
}

.msg1::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  background: #09bb07;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  transform: rotate(45deg);
  left: -5px;
  top: 35%;
}

.send {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  padding: 10px;
  background: #f0f0f0;
  position: fixed;
  width: 95%;

  .van-cell {
    width: 81%;
  }
}
</style>
